<template>
  <div>
    <form class="position-relative form-inline pt-2">
      <label for="search"></label>
      <input type="search" id="search" @keyup.enter="ClosePopUp" class="form-control mx-2 w-100 custom-setting-input">
      <span class="custom-setting-span" @click="ClosePopUp">
        <i class="fa fa-search"></i>
      </span>
    </form>
    <button class="btn btn-primary m-2" @click="ClosePopUp">Close</button>
  </div>
</template>

<script>
export default {
  name: 'PopUpSearch',
  created: function () {
    console.log(window)
  },
  methods: {
    ClosePopUp: function () {
      let show = !this.$store.state.moduleA.showSearch
      // console.log(show)
      this.$store.dispatch({
        type: 'showSearch',
        show: show
      })
    }
  }
}
</script>

<style scoped>
  .custom-setting-input{
    border-radius: 30px;
  }
  .custom-setting-span{
    position: absolute;
    left: 94%;
    top: 8px;
    padding: 5px 15px;
  }
  .custom-setting-span:hover{
    cursor: pointer;
  }
</style>
